<template>
    <div>
        <!-- 工具栏 -->
        <a-space style="margin-bottom: 10px">
            <a-button type="primary" @click="addRow">{{$ti18('rxList.newBtn','新建')}}</a-button>
            <a-button @click="addSubRow">{{i18n('addSubRow','新增子级')}}</a-button>
            <a-button @click="delRow">{{$ti18('rxList.delBtn','删除')}}</a-button>
            <a-button @click="moveUp">{{$comi18('grid.up','向上')}}</a-button>
            <a-button @click="moveDown">{{$comi18('grid.down','向下')}}</a-button>
        </a-space>
        <!-- 表格 -->
        <rx-grid
            ref="table"
            :columns="columns"
            :data-source="customList"
            :allow-row-select="true"
            bordered
            :multi-select="true"
            :show-page="false"
            id-field="idx_"
            style="min-height: 300px"
        >
            <!-- 插槽：名称 -->
            <template #name="{ record }">
                <a-input v-model="record.name" style="width: 100%" />
            </template>

            <!-- 插槽：标识名 -->
            <template #value="{ record }">
                <a-input v-model="record.value" style="width: 100%" />
            </template>
        </rx-grid>
    </div>
</template>

<script>
import { BaseFormModel, GridMixin, RxGrid } from "@lowcode/jpaas-common-lib"
import linkBase from '@/views/modules/form/core/cellRender/linkBase'

export default {
    name: 'TabTreeSettingCustom',
    mixins: [BaseFormModel, GridMixin, linkBase],
    components: { RxGrid },
    props: {
        defaultValue: { type: Object, default: () => {} },
    },
    data() {
        return {
            columns: [
                { title: this.$ti18('rxList.index','序号'), dataIndex: 'index', type: 'indexColumn', width: 100 },
                {
                    title: this.i18n('form.name','名称'),
                    dataIndex: 'name',
                    width: 100,
                    scopedSlots: { customRender: 'name' },
                },
                {
                    title: this.i18n('form.value','标识名'),
                    dataIndex: 'value',
                    width: 100,
                    scopedSlots: { customRender: 'value' },
                },
            ],
            customList: [],
            localFields: [],
        }
    },
    created() {
        this.init()
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formCodegenBusiness.edit2.TabTreeConfSetting",key);
        },
        init() {
            // if (this.config) {
            //     let obj = this.parse(this.config)
            //     if (obj.hasOwnProperty('alias')) {
            //         this.customList = obj
            //     }
            // }
            const { type, setting } = this.defaultValue
            if (type === 'custom') {
                this.customList = setting.customList ? [...setting.customList] : []
            }
        },
        getData() {
            return { customList: this.customList }
        },

        // 新增行
        addRow() {
            const newRow = {
                name: '',
                value: '',
            }
            this.$refs.table.addRow(newRow)
        },
        addSubRow(){
            var selectRow = this.$refs.table.getSelectedRow();
            if(!selectRow){
                this.$message.error(this.$ti18('rxMsa.masWarn.selectOneRecord', '请选择一行记录!'));
                return;
            }
            var ary=[];
            if (selectRow.children) {
                ary = selectRow.children;
            } else {
                ary = selectRow.children = [];
            }
            this.$refs.table.addItem(ary,{name:'',value:'',parentId:selectRow.idx_});
            this.$refs.table.$forceUpdate();
        },
        // 删除行
        delRow() {
            const table = this.$refs.table
            table.removeRows()
            table.selectedRowKeys = []
            table.selectedRows = []
            this.$forceUpdate()
        },
        // 向上
        moveUp() {
            this.$refs.table.moveUp()
        },
        // 向下
        moveDown() {
            this.$refs.table.moveDown()
        },
    },
    watch: {
        fields: {
            handler(val, oldVal) {
                this.localFields = val
            },
            deep: true,
            immediate: true,
        },
    },
}
</script>
